<template>
  <div class="page login">
    <div class="login-box">
      <div class="login-header">
        <img src="../assets/img/logo.png">
      </div>
      <h3>Login</h3>
      <form>
        <input type="text" v-model="username" placeholder="账号" class="login-input"/>
        <p>*请填写系统发放的账号,或绑定邮箱</p>
        <input type="password" v-model="password" placeholder="密码" class="login-input"/>
        <p><input type="checkbox" v-model="remeberName" style="margin:0 0.04rem;height:0.12rem;border: 0.01rem solid #93a6d2;"/><span style="margin-left:0.04rem;color:#93A6D2;">记住用户名</span></p>
      </form>
      <div class="login-btn">
        Login
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      remeberName: false
    }
  },
  created () {
    if (window.localStorage.getItem('username')) {
      this.username = window.localStorage.getItem('username')
      this.remeberName = true
    }
  },
  watch: {
    remeberName (value) {
      this.$nextTick(() => {
        if (value) {
          window.localStorage.setItem('username', this.username)
        } else {
          window.localStorage.removeItem('username')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    width:100%;
    background-image:url('../assets/img/loginBk.png');
background-repeat:no-repeat;
background-position:center;
    height:100%;
    position:relative;
    .login-box{
        width:3.44rem;
        height:3.82rem;
        padding:0.4rem;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        background:white;
        border-radius:0.16rem;
        .login-header{
            height:0.36rem;
            margin-bottom:0.12rem;
           img{
                width:auto;
                height:100%;
           }
        }
        h3{
            color:#405891;
            height:0.48rem;
            font-size:0.24rem;
            line-height:0.48rem;
            margin-bottom:0.16rem;
        }
        form  .login-input{
            width:2.64rem;
            height:0.34rem;
            border: 0.01rem solid #93a6d2;
            border-radius: 0.04rem;
            outline:none;
            padding:0 0.05rem;
        }
        input::placeholder{
                  color:#93a6d2;
                  font-weight:600;
                  font-size:0.14rem;
              }
        p{
            color:#93A6D2;
            font-size: 0.12rem;
            width:100%;
            line-height:0.24rem;
            margin:0.04rem;
            display:flex;
            flex-direction:clomun;
            align-items:center;
        }
        .login-btn{
            width:2.64rem;
            height:0.4rem;
            background:#437EDE;
            border-radius: 0.04rem;
            margin-top:0.16rem;
            text-align:center;
            line-height:0.4rem;
            font-size:0.16rem;
        }
    }
}
</style>
